<template>
  <!-- 合同详情 -->
  <div id="contractDetail">
    <!-- <p class="title">{{ contactData.name }}</p> -->
    <p class="title">定制加工合同</p>
    <!-- <el-button type="primary" @click="printPreview" v-if="$route.query.id"
      >打印预览</el-button
    > -->
    <div class="topInfo infoBox">
      <div class="left">
        <div class="item">
          <p class="label">需方（甲方）：</p>
          <p class="value click" @click="toCustomerDetail(provideForm)">
            {{ provideForm.customerName }}
          </p>
        </div>
        <div class="item">
          <p class="label">供方（乙方）：</p>
          <p class="value">{{ needForm.partyBName }}</p>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <p class="label">合同编号：</p>
          <p class="value">{{ contactData.num }}</p>
        </div>
        <div class="item">
          <p class="label">签订地点：{{ contactData.orderAddress }}</p>
          <p class="value"></p>
        </div>
      </div>
    </div>
    <p class="mainInfo">
      甲乙双方均为依法成立并有效存续的有限责任公司，依照《中华人民共和国合同法》和其他有关法律法规，遵循公平、诚信的原则，就户外产品买卖，经友好协商达成以下协议条款:
    </p>
    <div class="tableTitle infoBox">
      <p class="left">一、产品名称、商标、型号、厂家、数量、金额</p>
      <div class="item">
        <p class="label">签订时间：</p>
        <p class="value">{{ contactData.orderTime }}</p>
      </div>
    </div>
    <table class="table" border="1">
      <thead>
        <tr>
          <th>序号</th>
          <th>产品名称</th>
          <th>规格型号</th>
          <th>数量</th>
          <th>单价</th>
          <th>金额</th>
          <th>材质</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in contactData.contractProductsList"
          :key="item.id"
          class="center"
        >
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.specification }}</td>
          <td>{{ item.num }}</td>
          <td>{{ item.onePrice }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.material }}</td>
          <td>{{ item.remark }}</td>
        </tr>
        <tr>
          <td colspan="8">
            总计：
            <span>￥{{ quotesData.price }}</span>
            <span v-if="contactData.supplementMoney" style="margin-left: 10px">
              补充金额：￥{{ contactData.supplementMoney }}
            </span>
          </td>
          <!-- <td style="text-align: center">{{ quotesData.price }}</td> -->
        </tr>
        <tr>
          <td colspan="8">交付方式：{{ quotesData.payDescription }}</td>
        </tr>
        <tr>
          <td colspan="8">交货日期：{{ quotesData.deliveryTime }}天之后</td>
        </tr>
        <tr>
          <td colspan="8">验收标准：{{ quotesData.checkRule }}</td>
        </tr>
      </tbody>
    </table>
    <div class="clause">
      <p>二、质量要求、技术标准、供方对质量负责的条件和期限:</p>
      <p class="content" v-html="lessorArticle"></p>
      <div v-if="contactData.supplementArticle">
        <p>三、补充条款:</p>
        <p class="content" v-html="contactData.supplementArticle"></p>
      </div>
    </div>
    <div class="bottomInfo infoBox">
      <div class="left">
        <p class="part">甲 方:</p>
        <div class="item">
          <p class="label">单位名称：</p>
          <p class="value">{{ provideForm.customerName }}</p>
        </div>
        <div class="item">
          <p class="label">法定代表人：</p>
          <p class="value">{{ provideForm.legalAdmin }}</p>
        </div>
        <div class="item">
          <p class="label">委托代表人：{{ provideForm.firstcontacter }}</p>
          <p class="value"></p>
        </div>
        <div class="item">
          <p class="label">电话：</p>
          <p class="value">{{ provideForm.telephone }}</p>
        </div>
        <div class="item">
          <p class="label">开户银行：</p>
          <p class="value">{{ provideForm.bankName }}</p>
        </div>
        <div class="item">
          <p class="label">账户：</p>
          <p class="value">{{ provideForm.bankAccount }}</p>
        </div>
      </div>
      <div class="right">
        <p class="part">乙 方:</p>
        <div class="item">
          <p class="label">单位名称：</p>
          <p class="value">{{ needForm.partyBName }}</p>
        </div>
        <div class="item">
          <p class="label">法定代表人：</p>
          <p class="value">{{ needForm.legalRepresentName }}</p>
        </div>
        <div class="item">
          <p class="label">委托代表人：</p>
          <p class="value">{{ contactData.username }}</p>
        </div>
        <div class="item">
          <p class="label">电话：</p>
          <p class="value">{{ contactData.userPhone }}</p>
        </div>
        <div class="item">
          <p class="label">开户银行：</p>
          <p class="value">{{ needForm.bankAddress }}</p>
        </div>
        <div class="item">
          <p class="label">账户：</p>
          <p class="value">{{ needForm.bankNum }}</p>
        </div>
      </div>
    </div>
    <print-dom ref="printDom" v-show="false" id="printDom"></print-dom>
  </div>
</template>
<script>
import print from '@/utils/print'
import printDom from '../../components/printDom.vue'
export default {
  name: '',
  data () {
    return {
      // provideForm: {//甲方（供方）
      //   name: '浙江泰集光电科技有限公司',
      //   contractNmae: '刘工',
      //   phone: '125000',
      //   fax: '',
      //   specification: '手板模型'
      // },
      contactData: {},
      provideForm: {},
      lessorArticle: {},//条款
      quotesData: {},//报价数据
      needForm: {}
      // needForm: {//乙方（需方）
      //   name: '杭州贝思特模型有限公司',
      //   legalPerson: '',//法人
      //   entrustPerson: '',//委托代表人
      //   phone: '',
      //   bankName: '',
      //   bankAccount: ''
      // },

    }
  },
  components: {
    printDom
  },
  methods: {
    //打印预览
    async printPreview () {
      let { data } = await this.$API.contract.getContractById.post({ id: this.contactData.id })
      this.$refs.printDom.provideForm = data.customerData
      this.$refs.printDom.lessorArticle = data.lessorArticle
      this.$refs.printDom.quotesData = data.quotesData
      this.$refs.printDom.needForm = data.contractFit
      this.$refs.printDom.contactData = data
      this.$nextTick(() => {
        let dom = document.querySelector('#printDom')
        let clone = dom.cloneNode(true)
        clone.style.display = 'block'
        print(clone)
      })
    },

    // 跳转到客户详情页
    toCustomerDetail (data) {
      this.$router.push({
        path: "/customer/customerManagement/customerDetail",
        query: {
          id: data.id,
        },
      })

    }

  }
}
</script>
<style lang="scss" scoped>
#contractDetail {
  line-height: 1.8em;
  .title {
    text-align: center;
    font-size: 20px;
  }
  .infoBox {
    display: flex;
    width: 100%;
    margin: 20px 0 10px 0;
    line-height: 1.8em;
    .left {
      width: 70%;
    }
    .right {
      width: 30%;
    }
    .item {
      display: flex;
    }
    .date {
      margin-top: 20px;
      margin-left: 10px;
      span {
        margin: 0 20px;
      }
    }
    .part {
      // text-align: center;
      padding-left: 30%;
    }
    .click {
      cursor: pointer;
    }
  }

  .mainInfo {
    margin-bottom: 10px;
    text-indent: 2em;
  }
  .tableTitle {
    margin: 0;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 12px;
    th {
      height: 32px;
      font-weight: normal !important;
    }
    td {
      min-height: 40px;
      padding: 5px;
    }
    .center {
      text-align: center;
    }
  }
  .bottomInfo {
    .left,
    .right {
      flex: 1;
    }
  }
}
</style>